葫芦的运维日志

下一篇 搜索 上一篇

---

基于element-ui 进行form 值检查，动态删除表单项，空置提交检查.

VUE:

<template>
  <el-container>
    <el-header height="40px">接入配置</el-header>
    <el-main>
      <div class="access_form">
        <el-form ref="form" :model="form" label-width="120px" label-position="left" :rules="rules">
          <el-form-item :label="item.label" v-for="(item,index) in form.zone_range" :key="index" required>
            <el-col :span="3">
              <el-form-item :prop="'zone_range.' + index + '.start_id'"
                            :rules="{type: 'number', required: true, message: 'start_id不能为空', trigger: 'blur'}">
                <el-input type="number" v-model.number="item.start_id" autocomplete="off"></el-input>
              </el-form-item>

            </el-col>

            <el-col class="line" :span="0.1">-</el-col>
            <el-col :span="3">
              <el-form-item :prop="'zone_range.' + index + '.end_id'"
                            :rules="{type: 'number', required: true, message: 'end_id不能为空', trigger: 'blur'}">
                <el-input type="number" v-model.number="item.end_id" autocomplete="off"></el-input>
              </el-form-item>

            </el-col>

            <el-button @click="removeDomain(index)">删除</el-button>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-col class="line" :span="3"></el-col>

            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>

  export default {
    name: "Config",
    data() {
      return {
        form: {
          zone_range: [{
            label: "AQQ大区范围:",
            start_id: 0,
            end_id: 0,
            name: 'aqq_range'
          },
            {
              label: "AWX大区范围:",
              start_id: 0,
              end_id: 0,
              name: 'awx_range'
            },
            {
              label: "IQQ大区范围:",
              start_id: 0,
              end_id: 0,
              name: 'iqq'
            },
            {
              label: "IWX大区范围:",
              start_id: 0,
              end_id: 0,
              name: 'iwx'
            },
          ]

        }
      }
    },
    methods:
      {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
        ,
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
        ,
        removeDomain(index) {
          if (this.form.zone_range.length != 1) {

            this.form.zone_range.splice(index, 1);
          }
        }
        ,
      }
    ,


  }
</script>

<style scoped>
  .el-header {
    background: #f8f8f8;
    line-height: 40px;
  }

  .overview-gap {
    display: block;
  }

  .el-main {
    background: #ececec;
    margin: 20px;
    padding: 0px;
  }

  .access_form {
    background: #fff;
    height: 600px;
    padding: 15px;
  }
</style>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇